<template>
  <div class="userinfo" v-if="show">
    <div class="info-area">
      <img :src="userhead" class="head"/>
      <div class="name">{{username}}</div>
      <div class="line"></div>
      <div class="sure" @click="onSureClick">知道了</div>
    </div>
  </div>
</template>
<style scoped>
  .userinfo{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background:rgba(0,0,0,0.6);
  }
  .info-area{
    width: 280px;
    height: 164px;
    background:rgba(255,255,255,1);
    border-radius:8px;
    margin: 0 auto;
    margin-top: 110px;
    padding-top: 24px;
    z-index: 100;
  }
  .head{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto;
    display: block;
  }
  .name{
    font-size:15px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:21px;
    margin-top: 11px;
    text-align: center;
  }
  .line{
    width: 100%;
    height:0.5px;
    background:rgba(229,229,229,1);
    margin-top: 16px;
  }
  .sure{
    width: 100%;
    font-size:18px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(254,108,136,1);
    line-height:48px;
    text-align: center;
  }
</style>
<script>
  export default {
    name: 'UserInfo',
    data (){
      return {
        'show': true
      }
    },
    created () {

    },
    props: ['userhead','username','onSureClick'],
    methods: {
      onSureClickListner() {
        this.onSureClick && this.onSureClick();
      }
    }
  }
</script>

